<template>
	<div class="base_more_avatar" :class="getClass">
		<div class="item" v-for="item in showList" :key="item.avatar" @click="clickAvatar(item)">
			<div class="item_avatar">
				<img class="item_avatar__inner bg-primary" v-if="item.avatar" :src="item.avatar" alt="" />
				<img class="item_avatar__inner bg-white" v-else src="//projectimg-1256680128.cos.ap-beijing.myqcloud.com/lpm/d74df4cb-358e-4b87-8652-36e08fd2f584.png" alt="" />
			</div>
		</div>
		<div class="item item_more" v-if="showMore" @click="clickMore()">
			<div class="item_avatar">
				<div class="item_avatar__inner bg-primary">{{ moreText }}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { toRefs, computed } from 'vue'
const props = defineProps({
	list: {
		type: Array,
		default: []
	},
	direction: {
		type: String,
		default: 'right'
	},
	max: {
		type: Number,
		default: 6
	}
})

const emits = defineEmits(['click', 'click:more'])
const showList = computed(() => {
	const { list, max } = toRefs(props)
	return list.value.slice(0, max.value)
})
const showMore = computed(() => {
	const { list, max } = toRefs(props)
	return list.value.length > max.value
})
const moreText = computed(() => {
	if (!showMore.value) return ''
	const { list, max } = toRefs(props)
	return `+${ list.value.length - max.value }`
})

const getClass = computed(() => {
	const _class = []
	const { direction } = toRefs(props)
	_class.push(direction.value)
	return _class
})

function clickAvatar (item) {
	emits('click', showList)
}
function clickMore () {
	const { list, max } = toRefs(props)
	// emits('click:more', list.value.slice(max.value))
}
</script>

<style scoped lang="less">
.base_more_avatar {
	display: flex;
	&.left { justify-content: flex-start; }
	&.right { justify-content: flex-end; }
	.item {
		margin-left: -14px;
		&_avatar {
			&__inner {
				box-sizing: border-box;
				width: 34px;
				height: 34px;
				border-radius: 50%;
				vertical-align: middle;
				text-align: center;
				line-height: 30px;
				font-size: 14px;
				font-weight: 500;
				color: #fff;
				border: 2px solid #fff;
			}
		}
	}
}
</style>
